import React, {useContext} from 'react'
import { appContext, appSetStateContext } from '../AppState'
import {withAddToCart} from './AddToCart'

// 创建接口
export interface RobotProps {
  id: number,
  name: string,
  email: string,
  addToCart: (id, name) => void
}

const Robot: React.FC<RobotProps> = ({id, name, email, addToCart}) => {
  const value = useContext(appContext)
 
  return (
    // <appContext.Consumer>
    //   {
    //     (value) => { 
    //       return  <li>
    //           <img alt="robot" src={`https://robohash.org/${id}`}></img>
    //           <h1>{name}</h1>
    //           <p>{email}</p>
    //           <h1>{value.userType}</h1>
    //         </li>
    //     }
    //   }
    // </appContext.Consumer>

    <li>
      <img alt="robot" src={`https://robohash.org/${id}`}></img>
      <h1>{name}</h1>
      <p>{email}</p>
      <h1>{value.userType}</h1>
      <button onClick={() => addToCart(id, name)}>加入购物车</button>
    </li>


  )
}

export default withAddToCart(Robot)
